<template>
	<div class="app-container">
		<el-main>
			<el-card shadow="never">
				<div class="text item">
					注意事项：
				</div>
				<div class="text item">
					单次入库数量不宜过多，建议小于等于1000，否则所需时间可能会过久。
				</div>
			</el-card>

			<el-row :gutter="20" type="flex" align="center" class="margin-tb">
				<el-col>
					<el-button type="primary" size="mini" @click.native="showAdd()">新编号入库</el-button>
				</el-col>
			</el-row>

			<el-table stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="tabLoading"
				style="width: 100%" :row-class-name="tableRowClassName" border
				:default-sort="{prop: 'date', order: 'descending'}" highlight-current-row
				@selection-change="handleSelectionChange" row-key="id" size="mini">
				<el-table-column type="index" label="序号" width="50">
					<template slot-scope="scope">
						<span>{{(listParams.page - 1) * listParams.page_size + scope.$index + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column label="入库状态" width="120" align="center">
					<template slot-scope="scope">
						<el-button type="warning" :loading="true" plain size="mini" v-if="!!scope.row.importing">入库中
						</el-button>
						<el-button type="primary" plain size="mini" disabled v-else>已入库</el-button>
					</template>
				</el-table-column>
				<el-table-column label="总数" min-width="80" show-overflow-tooltip align="center">
					<template slot-scope="scope">
						<span
							:style="{'color': (scope.row.all_count>0?'#409EFF':'#909399')}">{{scope.row.all_count}}</span>
					</template>
				</el-table-column>
				<el-table-column label="入库数量" min-width="80" show-overflow-tooltip align="center">
					<template slot-scope="scope">
						<span
							:style="{'color': (scope.row.code_count>0?'#67C23A':'#909399')}">{{scope.row.code_count}}</span>
					</template>
				</el-table-column>
				<el-table-column label="过滤数量" min-width="80" show-overflow-tooltip align="center">
					<template slot-scope="scope">
						<span
							:style="{'color': (scope.row.count_except>0?'#F56C6C':'#909399')}">{{scope.row.count_except}}</span>
					</template>
				</el-table-column>
				<el-table-column label="编号" min-width="250" show-overflow-tooltip align="center">
					<template slot-scope="scope">
						<span>{{scope.row.code_start}} - {{scope.row.code_end}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="updated_at" label="入库时间" min-width="160" align="center"></el-table-column>
				<el-table-column label="操作" width="100px" align="center" fixed="right">
					<template slot-scope="scope">
						<el-button type="danger" icon="el-icon-delete" size="mini" @click.native="delOne(scope.row.id)" v-show="scope.row.mp_count > 0">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页数据 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="current" :page-sizes="[10, 20, 50, 100, 200, 500]" :page-size="listParams.page_size"
				layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		</el-main>

		<el-dialog :close-on-click-modal="false" title="编号入库" center :visible.sync="dialogCU" width="600px"
			@close="dialogCUClose('cuForm')">
			<el-form ref="cuForm" v-loading="dialogCULoading" :rules="cuRules" :model="cuForm" label-width="130px"
				center>
				<el-form-item label="总长度" prop="code_length">
					<el-col :span="24">
						<el-input clearable v-model.trim="cuForm.code_length" type="number" placeholder="请输入编号总长度">
							<template slot="append">个字符</template>
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="前缀" prop="prefix">
					<el-col :span="24">
						<el-input clearable v-model.trim="cuForm.prefix" type="text" placeholder="请输入编号前缀" />
					</el-col>
				</el-form-item>
				<el-form-item label="起始数字(包含)" prop="number_start">
					<el-col :span="24">
						<el-input clearable v-model.trim="cuForm.number_start" type="number" placeholder="请输入起始数字">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="结束数字(包含)" prop="number_end">
					<el-col :span="24">
						<el-input clearable v-model.trim="cuForm.number_end" type="number" placeholder="请输入结束数字">
						</el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="数量">
					<el-col :span="24">
						<span
							v-if="(cuForm.number_end || 0) > (cuForm.number_start || 0)">{{(cuForm.number_end || 0) - (cuForm.number_start || 0) + 1}}个</span>
						<span v-else>0个</span>
					</el-col>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogCU=false">取 消</el-button>
				<el-button type="primary" @click.native="onSubmit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		Message
	} from 'element-ui'
	import {
		import_by_code_list,
		import_code,
		del
	} from '@/api/system/media.js'

	export default {
		data() {
			return {
				// search form
				searchForm: {

				},
				// page option
				total: null, // 总页数
				current: 1, // 当前页

				// list table
				tableData: [], // 列表数据
				selectIds: [], // 多选选项id

				listParams: {
					page: 1,
					page_size: 10
				}, // list参数
				tabLoading: true,

				// CU dialog
				dialogCULoading: false,
				dialogCU: false, // 增修弹框显示
				cuForm: {
					prefix: null,
					number_start: null,
					number_end: null,
					code_length: null
				},
				cuRules: {
					number_start: [{
						required: true,
						message: '请输入起始数字',
						trigger: 'blur'
					}],
					number_end: [{
						required: true,
						message: '请输入结束数字',
						trigger: 'blur'
					}],
					code_length: [{
						required: true,
						message: '请输入编号总长度',
						trigger: 'blur'
					}],
				},
			}
		},
		created() {

		},
		mounted() {
			this.getList()
		},
		methods: {
			// 删除
			delOne(id = false) {
				this.$confirm('确认要删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						dangerouslyUseHTMLString: true
					})
					.then(() => {
						del(id).then(res => {
							const {
								code,
								date,
								message
			 			} = res
							this.getList()
							Message({
								message,
								type: 'success',
								duration: 1000
			 			})
						})
					}).catch()
			},
			// 新增弹出框
			showAdd() {
				this.dialogCU = true
				this.dialogCULoading = false
				this.resetForm()
				this.$refs['cuForm'] && this.$refs['cuForm'].resetFields()
			},

			// 关闭弹窗
			dialogCUClose(formName) {
				switch (formName) {
					case 'cuForm':
						this.$refs['cuForm'].clearValidate()
						this.resetForm()
						break
				}
			},

			resetForm() {
				this.cuForm = {
					prefix: null,
					number_start: null,
					number_end: null,
					code_length: null
				}
			},

			// 提交数据 增、改
			onSubmit(id) {
				// 表单校验
				this.$refs.cuForm.validate(valid => {
					// ~ 校验通过
					if (valid) {
						var obj = Object.assign({}, this.cuForm)

						// 显示loading
						this.dialogCULoading = true;

						// ~~ 修改
						if (id) {
							//this.onEdit(obj);
						} else {
							// ~~ 添加
							delete obj.id
							this.onAdd(obj);
						}
					} else {
						// ~ 不通过
						return false;
					}
				});
			},

			// 添加
			onAdd(obj) {
				return import_code(obj)
					.then(res => {
						const {
							code,
							data
						} = res
						if (code === 200) {
							Message({
								message: data,
								type: 'success',
								duration: 1000
							})
							this.dialogCU = false
							this.getList()
						}
						this.dialogCULoading = false
					})
					.catch(() => {
						this.dialogCULoading = false
					})
			},

			// 获得table列表
			getList() {
				this.tabLoading = true
				return import_by_code_list(this.listParams)
					.then(res => {
						let {
							data: {
								records,
								total
							}
						} = res;
						this.tableData = records
						this.total = total;
						this.tabLoading = false;
					})
					.catch(() => {
						this.tabLoading = false
					})
			},

			// 重置搜索表单
			searchReset() {
				this.$refs.searchForm.resetFields()
				const params = this.$refs.searchForm.model
				console.log(params)
				this.listParams = Object.assign(this.listParams, params)
				this.getList()
			},
			// 搜索
			searchSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						const params = this.$refs[formName].model
						this.listParams.page = 1
						this.current = 1
						this.listParams = Object.assign(this.listParams, params)
						this.getList()
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			// 移除
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},

			// 表单多选
			handleSelectionChange(val) {
				this.selectIds = val.map(item => item.id)
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.getList()
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParams.page = val
				this.getList()
			},
			//带状态表格
			tableRowClassName({
				row
			}) {
				if (row.is_joined === 0) {
					return "stop-row";
				}
				return "";
			},
		}
	}
</script>

<style>
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 14px;
	}
</style>
